<template>
	<div class="p-policy-detail">
		<!-- 申报详情 -->
		<div class="location font13 h99">
			<router-link to="/vip/p_policy">{{$t('common.policy.personCenter')}}</router-link>
			<span>&gt;</span>
			<span>{{$t('common.detail.policyDetailsb')}}</span>
		</div>
		<div class="company-policy-detail-content">
			<div class="company-policy-detail-title">
				<p class="flexCenter">
					{{data.title}}
					<span>{{data.applyStatusTxt}}</span>
				</p>
				<p class="font14 h99">{{$t('common.detail.releaseTime')}}：{{data.releaseTime}}</p>
			</div>
			<div class="company-policy-detail-box flexItems">
				<div class="company-policy-detail-box-name">{{$t('common.detail.sourcePolicy')}}：</div>
				<span class="color1">{{data.policyArticles.title}}</span>
			</div>
			<div class="company-policy-detail-box flexItems">
				<div class="company-policy-detail-box-name">{{$t('common.detail.declarationSubject')}}：</div>
				<span>{{data.subjectTypeTxt}}</span>
			</div>
			<div class="company-policy-detail-box flexItems">
				<div class="company-policy-detail-box-name">{{$t('common.detail.declarationTime')}}：</div>
				<span>{{data.beginTime}} - {{data.endTime}}</span>
				<span class="h99">（{{$t('common.company.companytask9')}}）</span>
			</div>
			<!-- <div class="company-policy-detail-boxTitle">所有崖州湾科技城内企业员工，符合以下条件的均可申报，由员工所在企业统一收集材料信息上报：</div> -->
			<div class="company-policy-detail-boxContent" v-html="data.briefContent">
				<!-- {{data.briefContent}} -->
				<!-- <p>1、毕业满一年的全日制本科学历及以上</p>
				<p>2、非本市户口且在本市无自购住房</p> -->
			</div>

			<!-- 申报填写提交 -->
			<div class="shenbao">
				<div class="zmlTitle flexItems">{{$t('common.detail.declarationSubmit')}}</div>
				<div class="shenbao-head flexBetween">
					<div>
						<span>{{$t('common.policy.postName')}}：</span>
						<span>{{data.applyName}}</span>
					</div>
				</div>
				<div class="shenbao-head flexBetween">
					<div>
						<span>{{$t('common.policy.talentName')}}：</span>
						<span>{{data.applyName}}</span>
					</div>
					<div>
						<span>{{$t('common.policy.talentSex')}}：</span>
						<span>{{data.sexTxt}}</span>
					</div>
					<div>
						<span>{{$t('common.company.cashResult')}}：</span>
						<span>{{data.cashInTxt}}</span>
					</div>
				</div>
				<div class="shenbao-ziliao">
					<table>
						<tr>
							<td>{{$t('common.policy.file')}}</td>
							<td></td>
							<td></td>
						</tr>
						<tr v-for="(item, idx) in applyMaterialList" :key="idx">
							<td>{{item.name}}</td>
							<td class="h99">{{item.requirement}}</td>
							<td class="tr">
								<a :href="imgUrl+item.userUploadAttachment.path" download="" class="color1" v-if="item.userUploadAttachment && item.userUploadAttachment.path">
									{{item.userUploadAttachment.name}}
								</a>
							</td>
						</tr>
						
					</table>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { ajax, showToast, ajaxBackAdd } from '@/utils/js.js';
import { queryPolicyGrDetail } from '@/services/api.js';
const log = console.log;

export default {
	data() {
		return {
			imgUrl:this.$store.state.imgUrl,
			declarationApplyId: '', //政策id
			data: {},
			applyMaterialList: ''
		};
	},
	mounted() {
		this.declarationApplyId = this.$route.query.id;

		this.content();
	},
	watch: {
		'$i18n.locale'() {
			this.content();
		}
	},
	methods: {
		content() {
			ajax(this, queryPolicyGrDetail, { declarationIssuedId: this.declarationApplyId }, res => {
				log('申报详情',res);
				this.data = res.data;
				this.applyMaterialList = res.data.applyMaterialList;
			});
		}
	}
};
</script>
<style lang="scss">
.p-policy-detail {
	.company-policy-detail-content {
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 0 130px;
		overflow: hidden;
		padding-bottom: 76px;
		.company-policy-detail-title {
			text-align: center;
			padding-top: 44px;
			padding-bottom: 30px;
			p:nth-of-type(1) {
				font-size: 22px;
				font-weight: bold;
				margin-bottom: 16px;
				span {
					display: inline-block;
					padding: 3px 7px;
					color: #0f54bc;
					background: rgba(15, 84, 188, 0.1);
					font-size: 12px;
					margin-left: 12px;
				}
			}
		}
		.company-policy-detail-box {
			margin-bottom: 16px;
			.company-policy-detail-box-name {
				min-width: 70px;
				margin-right: 35px;
			}
		}
		.company-policy-detail-boxTitle {
			margin: 30px 0;
		}
		.company-policy-detail-boxContent {
			line-height: 22px;
		}
		.shenbao {
			padding-top: 20px;
			.shenbao-head {
				margin: 7px 0;
				div {
					span:nth-of-type(1) {
						margin-right: 20px;
					}
				}
				div:nth-of-type(2) {
					flex: 1;
					padding-left: 80px;
				}
			}
			.shenbao-ziliao {
				margin-top: 20px;
				table {
					width: 100%;
				}
				tr {
					height: 50px;
					border: 1px solid #ededed;
					td {
						padding-left: 30px;
					}
					td .color1 {
						text-decoration: underline;
						cursor: pointer;
						margin-right: 12px;
					}
				}
				tr:nth-of-type(1) {
					background-color: #f2f6fe;
				}
			}
			.shenbao-info {
				margin-top: 50px;
			}
			.shenbao-page {
				padding: 40px 0;
			}
		}
	}
}
</style>
